<template>
  <view class="common-car">
    <u-navbar title="购物车" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>

    <view class="empty-shop-car" v-if="isEmpty">
      <image src="https://wenzhen.jiangkukeji360.com/static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image>
      <text>当前您的购物车是空的</text>
      <view class="empty-shop-car-btn" @tap="goto">
        <text>去逛逛</text>
      </view>
    </view>
    <!--  -->
    <view class="shop-car" v-else>
      <view class="" style="margin-right: 50rpx">
        <view class="shop-car-header">
          <text @tap="cut">{{ isCut ? '管理' : '取消' }}</text>
        </view>
      </view>

      <view class="store-box" v-for="(itemq, indexq) in datas" :key="indexq">
        <view class="store-header">
          <image
            src="https://wenzhen.jiangkukeji360.com/static/select.png"
            v-if="itemq.checked == 2"
            class="checked-image"
            mode=""
            @tap="storeCheck(indexq, itemq.checked)"
          ></image>
          <image src="https://wenzhen.jiangkukeji360.com/static/not_select.png" v-else class="checked-image" mode="" @tap="storeCheck(indexq, itemq.checked)"></image>
          <view class="" style="width: 36rpx; height: 36rpx; margin-left: 23rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z4.png" mode="" style="width: 36rpx; height: 36rpx"></image>
          </view>

          <view class="" style="padding-left: 17rpx">
            {{ itemq.shop_name }}
          </view>
        </view>
        <view class="goodsInfo" v-for="(itemw, indexw) in itemq.goods" :key="indexw">
          <image
            src="https://wenzhen.jiangkukeji360.com/static/select.png"
            v-if="itemw.checked == 2"
            class="checked-image"
            mode=""
            @tap="goodsCheck(indexq, indexw, itemw.checked)"
          ></image>
          <image src="https://wenzhen.jiangkukeji360.com/static/not_select.png" v-else class="checked-image" mode="" @tap="goodsCheck(indexq, indexw, itemw.checked)"></image>
          <view class="goodsInfo-right">
            <image :src="img_url + itemw.specs_image" class="goods-image" mode="aspectFill"></image>
            <view class="goodsInfo-box">
              <text class="goods-name" style="font-size: 28rpx">{{ itemw.goods_name }}</text>
              <text class="spe" style="font-size: 26rpx; color: #666666">{{ itemw.specs_name }}</text>
              <view class="goods-box">
                <text class="goods-price" style="font-size: 28rpx; color: #e50014">¥{{ itemw.price }}</text>
                <view class="goods-num-box">
                  <view class="goods-image" @tap="sub(indexq, indexw, itemw.goods_num)">
                    <text>-</text>
                  </view>
                  <view class="goods-num">
                    <text>{{ itemw.goods_num }}</text>
                  </view>
                  <view class="goods-image" @tap="add(indexq, indexw, itemw.goods_num)">
                    <text>+</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="statistics-box">
        <view class="statistics">
          <view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
            <image src="https://wenzhen.jiangkukeji360.com/static/select.png" class="checked-image" mode=""></image>
            <text>全选</text>
          </view>
          <view class="statistics-left" v-else @tap="allCheck">
            <image src="https://wenzhen.jiangkukeji360.com/static/not_select.png" class="checked-image" mode=""></image>
            <text>全选</text>
          </view>
          <view class="statistics-right" v-if="isCut" @tap="accounts">
            <text>总计：</text>
            <text class="text-color" style="padding-right: 10rpx">¥{{ total }}</text>
            <view class="btn">
              <text style="font-size: 28rpx; color: #fff">去结算</text>
            </view>
          </view>
          <view class="statistics-right" v-else @tap="delect">
            <view class="btn1">
              <text>删除</text>
            </view>
          </view>
        </view>
        <view class="gap"></view>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'commonCar',
  data() {
    return {
      isEmpty: false,
      iPhoneX: false,
      datas: {},
      statisticsIndex: false,
      total: 0,
      isCut: true,
      background: {
        background: '#fff'
      }
    };
  },
  props: {
    list: {
      type: [Object, Array],
      default: {}
    }
  },

  watch: {
    // 关键
    list() {
      this.aa();
    }
  },
  mounted() {
    console.log(this.list, '什么');
  },
  // created() {
  // 	console.log(this.list,'什么')
  // 	this.iPhoneX = uni.getStorageSync('iPhoneX')

  // },
  methods: {
    aa() {
      if (this.list.length == 0) {
        this.isEmpty = true;
      } else {
        this.datas = this.list;
        this.isEmpty = false;
      }
    },
    //商品选择
    goodsCheck(storeIndex, goodsIndex, goodsChecked) {
      if (goodsChecked == 1) {
        this.datas[storeIndex].goods[goodsIndex].checked = 2;
      } else {
        this.datas[storeIndex].goods[goodsIndex].checked = 1;
      }
      //判断是否该店铺全选
      let storeChecked = true;
      this.datas[storeIndex].goods.map((item, index) => {
        if (item.checked == 1) {
          storeChecked = false;
        }
      });
      if (storeChecked == false) {
        this.datas[storeIndex].checked = 1;
      } else {
        this.datas[storeIndex].checked = 2;
      }

      //判断是否全选
      let statisticsIndex = true;
      this.datas.find((item, index) => {
        if (item.checked == 1) {
          statisticsIndex = false;
        }
      });
      if (statisticsIndex == false) {
        this.statisticsIndex = false;
      } else {
        this.statisticsIndex = true;
      }

      this.statistics();
    },
    //店铺选择
    storeCheck(storeIndex, storeCheck) {
      if (storeCheck == 1) {
        this.datas[storeIndex].checked = 2;
        this.datas[storeIndex].goods.find((item, index) => {
          item.checked = 2;
        });
      } else {
        this.datas[storeIndex].checked = 1;
        this.datas[storeIndex].goods.find((item, index) => {
          item.checked = 1;
        });
      }
      //判断是否全选
      let statisticsIndex = true;
      this.datas.find((item, index) => {
        if (item.checked == 1) {
          statisticsIndex = false;
        }
      });
      if (statisticsIndex == false) {
        this.statisticsIndex = false;
      } else {
        this.statisticsIndex = true;
      }
      this.statistics();
    },
    //减少
    sub(storeIndex, goodsIndex, goodsnum) {
      if (goodsnum == 1) {
        return;
      } else {
        this.datas[storeIndex].goods[goodsIndex].goods_num--;
      }
      this.statistics();
    },
    //增加
    add(storeIndex, goodsIndex, goodsnum) {
      this.datas[storeIndex].goods[goodsIndex].goods_num++;
      console.log(this.datas[storeIndex]);
      this.statistics();
    },
    //全选
    allCheck() {
      if (this.statisticsIndex) {
        this.datas.find((item, index) => {
          item.checked = 1;
          item.goods.find((itemq, indexq) => {
            itemq.checked = 1;
          });
        });
        this.statisticsIndex = false;
      } else {
        this.datas.find((item, index) => {
          item.checked = 2;
          item.goods.find((itemq, indexq) => {
            itemq.checked = 2;
          });
        });
        this.statisticsIndex = true;
      }
      this.statistics();
    },
    //统计
    statistics() {
      let total = 0;
      this.datas.find((item, index) => {
        item.goods.find((itemq, indexq) => {
          console.log(itemq, '---');
          if (itemq.checked == 2) {
            total = total + itemq.price * itemq.goods_num;
          }
        });
      });
      this.total = total.toFixed(2);
    },
    cut() {
      this.isCut = !this.isCut;
      this.statisticsIndex = true;
      this.allCheck();
    },
    accounts() {
      let judge = this.judgeSelect();
      if (judge) {
        this.$emit('accounts', this.datas);
      } else {
        uni.showToast({
          title: '您当前未选择任何商品,结算失败',
          icon: 'none'
        });
      }
    },
    delect() {
      let judge = this.judgeSelect();
      if (judge) {
        this.$emit('delect', this.datas);
      } else {
        uni.showToast({
          title: '您当前未选择任何商品,删除失败',
          icon: 'none'
        });
      }
    },
    judgeSelect() {
      let judge = false;
      this.datas.find((item, index) => {
        item.goods.find((itemq, indexq) => {
          if (itemq.checked == 2) {
            judge = true;
          }
        });
      });
      return judge;
    },
    goto() {
      uni.reLaunch({
        url: '/pages/shop/shop'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #000;
}
.common-car {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}

.empty-shop-car {
  width: 750rpx;
  min-height: 680rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-shop-car-image {
    width: 340rpx;
    height: 278rpx;
    margin-top: 102rpx;
  }

  text {
    margin-top: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

  .empty-shop-car-btn {
    width: 240rpx;
    height: 90rpx;
    background: #fbbc02;
    border-radius: 200rpx;
    margin-top: 40rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #313133;
  }
}

.shop-car {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .shop-car-header {
    width: 690rpx;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    text {
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;
    }
  }

  .store-box {
    width: 750rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;

    .store-header {
      width: 690rpx;
      height: 78rpx;
      padding: 0 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;

      .checked-image {
        width: 36rpx;
        height: 36rpx;
      }

      text {
        font-size: 28rpx;
        font-weight: 400;
        color: #313133;
        margin-left: 20rpx;
      }

      .label {
        width: 14rpx;
        height: 24rpx;
        margin-left: 10rpx;
        margin-top: 5rpx;
      }
    }

    .goodsInfo {
      width: 690rpx;
      height: 246rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 2rpx solid #ededed;

      &:nth-last-child(1) {
        border: none;
      }

      .checked-image {
        width: 36rpx;
        height: 36rpx;
      }

      .goodsInfo-right {
        width: 634rpx;
        height: 246rpx;
        margin-left: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .goods-image {
          width: 180rpx;
          height: 180rpx;
        }

        .goodsInfo-box {
          width: 428rpx;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .goods-name {
            width: 428rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #313133;
          }

          .spe {
            width: 428rpx;
            margin-top: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #919298;
          }

          .goods-box {
            width: 428rpx;
            margin-top: 18rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .goods-price {
              font-size: 32rpx;
              font-weight: 400;
              color: #313133;
            }

            .goods-num-box {
              width: 168rpx;
              height: 46rpx;
              display: flex;
              flex-direction: row;
              align-items: center;

              .goods-image {
                width: 46rpx;
                height: 44rpx;
                text-align: center;
                line-height: 44rpx;
                border: 1rpx solid #cfcfcf;
                font-size: 38rpx;
              }

              .goods-num {
                width: 76rpx;
                height: 44rpx;
                text-align: center;
                line-height: 44rpx;
                font-size: 33rpx;
                font-weight: 400;
                color: #666666;
                border-top: 1px solid #cfcfcf;
                border-bottom: 1px solid #cfcfcf;
              }
            }
          }
        }
      }
    }
  }

  .statistics-box {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;

    .statistics {
      width: 720rpx;
      padding: 0 0 0 30rpx;
      height: 98rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .statistics-left {
        width: 120rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        text {
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
        }
      }

      .statistics-right {
        width: 600rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .btn {
          width: 200rpx;
          height: 66rpx;
          background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
          border-radius: 33rpx;
          text-align: center;
          line-height: 66rpx;
          color: #ffff;
          font-size: 28rpx;
          margin-right: 28rpx;
        }
        .btn1 {
          width: 160rpx;
          height: 66rpx;
          border: 1rpx solid #cccccc;
          border-radius: 33rpx;
          text-align: center;
          line-height: 66rpx;
          font-size: 28rpx;
          color: #666666;
          margin-right: 28rpx;
        }

        .text-color {
          color: rgba(242, 18, 18, 1);
        }
      }
    }

    .gap {
      width: 750rpx;
      height: 40rpx;
    }
  }
}
</style>
